<template>
  <el-row :gutter="20" type="flex">
    <el-col :span="10">
      <NewCard title="问金赋值">
        <el-form
          ref="ruleForm"
          :rules="rules"
          :model="ruleForm"
          label-width="100px"
          label-position="left"
        >
          <el-form-item
            label="手机号"
            :rules="{
              required: true,
              trigger: 'blur',
              validator: validatePass,
            }"
            prop="phonenumber"
          >
            <el-input v-model="ruleForm.phonenumber"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="nickName">
            <el-input v-model="ruleForm.nickName"> </el-input>
          </el-form-item>
          <el-form-item label="银行凭证号" prop="serialNo">
            <el-input v-model="ruleForm.serialNo"></el-input>
          </el-form-item>
          <el-form-item label="汇款银行" prop="bank">
            <el-input v-model="ruleForm.bank"></el-input>
          </el-form-item>
          <el-form-item label="汇款账号" prop="bankNo">
            <el-input v-model="ruleForm.bankNo"></el-input>
          </el-form-item>
          <el-form-item label="汇款时间" prop="createTime">
            <el-date-picker
              format="yyyy-MM-dd"
              v-model="ruleForm.createTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="汇款金额" prop="amount">
            <el-input v-model="ruleForm.amount"></el-input>
          </el-form-item>
          <el-form-item label="赋予问金" prop="voucher">
            <el-input v-model="ruleForm.voucher"></el-input>
          </el-form-item>
          <SubBtn>
            <template slot="btn">
              <el-button round @click="resetForm('ruleForm')">重置</el-button>
              <el-button round class="addBtn" @click="submitForm('ruleForm')" v-hasPermi="['financial:userAssign:add']">立即创建</el-button>
            </template>
          </SubBtn>
        </el-form>
      </NewCard>
    </el-col>
    <el-col :span="14">
      <NewCard title="赋值记录">
        <ComTable
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
          :config="config"
          :pagination="{
            total: pageing.total,
            pageNum: pageing.pageNum,
            pageSize: pageing.pageSize,
          }"
          :list="assignmenttable"
          :modes="consumptionModes"
        >
        </ComTable>
      </NewCard>
    </el-col>
    <!-- <SubBtn>
      <template slot="btn">
        <el-button round @click="resetForm()">重设</el-button>
        <el-button
          type="primary"
          @click="submit"
          round
          v-hasPermi="['base:config:edit']"
          >保存</el-button
        >
      </template>
    </SubBtn> -->
  </el-row>
</template>

<script>
import ComTable from "@/wss/components/comTable.vue";
import SubBtn from "@/components/subBtn/subBtn.vue";
import NewCard from "../../../components/newCard.vue";

import {
  addUserassignment,
  getUserassignment,
} from "@/wss/newApi_3-24/askAround/index";
export default {
  name: "Invoice",
  components: { NewCard, SubBtn, ComTable },
  data() {
    let validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      }
      //使用正则表达式进行验证手机号码
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机号不正确！"));
      }
    };
    return {
      config: {
        // border: true,
        isAdd: false,
        loading: false,
      },
      assignmenttable: [], //赋值记录列表
      pageing: { pageNum: 1, pageSize: 10, total: 0 },
      consumptionModes: [
        {
          showOverflowTooltip: true,
          label: "日期",
          mode: "createTime",
        },
        {
          showOverflowTooltip: true,
          label: "姓名",
          mode: "nickName",
        },
        {
          showOverflowTooltip: true,
          label: "手机号",
          mode: "phonenumber",
        },
        {
          label: "银行凭证号",
          mode: "serialNo",
          showOverflowTooltip: true,
        },
        {
          label: "汇款银行",
          mode: "bank",
          showOverflowTooltip: true,
        },
        // {
        //   label: "收款银行",
        //   mode: "bank",
        //   showOverflowTooltip: true,
        // },
        {
          label: "汇款账号",
          mode: "bankNo",
          showOverflowTooltip: true,
        },
        // {
        //   label: "收款银行",
        //   mode: "payeeBank",
        //   showOverflowTooltip: true,
        // },
        {
          label: "金额（元）",
          mode: "amount",
          showOverflowTooltip: true,
        },
        
        {
          label: "赋予问金",
          mode: "voucher",
          showOverflowTooltip: true,
        },
   
      ],
      //发票参数
      ruleForm: {
        phonenumber: "", //手机号
        nickName: "", //姓名
        serialNo: "", //银行凭证
        bank: "", //收款银行
        bankNo: "", //汇款账号
        payeeBank: "", //汇款银行
        voucher: "", //问金
        amount: "", //汇款金额
        createTime: "", //汇款时间
      },
      //表单验证
      rules: {
        // phonenumber: [
        //   {
        //     validator: validatePhone,
        //     required: true,
        //     trigger: "blur",
        //   },
        // ],

        nickName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        serialNo: [
          { required: true, message: "请输入银行凭证", trigger: "blur" },
        ],
        payeeBank: [
          { required: true, message: "请输入收款银行", trigger: "blur" },
        ],
        bank: [{ required: true, message: "请输入汇款银行", trigger: "blur" }],

        createTime: [
          { required: true, message: "请选择回款时间", trigger: "blur" },
        ],
        bankNo: [
          { required: true, message: "请输入汇款账号", trigger: "blur" },
        ],
        amount: [
          { required: true, message: "请输入汇款金额", trigger: "blur" },
        ],
        voucher: [{ required: true, message: "请输入问金", trigger: "blur" }],
      },
      // 接口返回没有改动过的数据
      response: {},
    };
  },
  created() {
    this.getUserassignmentfn();
  },
  methods: {
    //查詢赋值记录
    async getUserassignmentfn() {
      let newdata = {
        pageNum: this.pageing.pageNum,
        pageSize: this.pageing.pageSize,
        total: this.pageing.total,
      };
      let { code, rows, total } = await getUserassignment(newdata);
      if (code == 200) {
        this.assignmenttable = rows;
        this.pageing.total = total;
      }
    },
    //用户赋值新增
    async addUserassignmentfn() {
      let newform = {
        userId: this.$store.getters.userId,
        nickName:this.ruleForm.nickName,
        phonenumber:this.ruleForm.phonenumber,
        serialNo: this.ruleForm.serialNo,
        bank: this.ruleForm.bank,
        bankNo: this.ruleForm.bankNo,
        amount: this.ruleForm.amount,
        voucher: this.ruleForm.voucher,
        payeeBank: this.ruleForm.payeeBank,
        createTime: this.ruleForm.createTime,
      };
      let { code } = await addUserassignment(newform);
      if (code == 200) {
        this.$message({
          message: "赋值成功",
          type: "success",
        });
        this.ruleForm = {};
        this.getUserassignmentfn();
      }
    },
    //立即创建
    async submitForm() {
      try {
        await this.$refs.ruleForm.validate();
        this.addUserassignmentfn();
      } catch (error) {
        console.log("error submit!!");
        return false;
      }
    },
    validatePass(rule, value, callback) {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      }
      if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机号非法"));
      } else {
        callback();
      }
    },
    handleCurrentChange(pageNum) {
      this.pageing.pageNum = pageNum;
      this.getUserassignmentfn();
    },
    // 页容量发生改变
    handleSizeChange(pageSize) {
      this.pageing.pageSize = pageSize;
      this.getUserassignmentfn();
    },
  },
};
</script>

<style scoped>
::v-deep .el-card__body {
  height: 100%;
}
::v-deep .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .el-card__body > div::-webkit-scrollbar {
  width: 0;
}

.el-row .el-col > .el-card {
  position: relative;
}

.el-form {
  margin-bottom: 60px;
}
.wss-container .main-box {
  height: calc(100% - 60px);
}
/* 右侧按钮样式 */
::v-deep .subBtn {
  padding: 8px 30px !important;
}
::v-deep .subBtn > .el-button {
  width: 100px;
  padding: 8px 0;
  font-size: 14px;
  color: #606e84;
}
::v-deep .subBtn > .el-button.el-button--primary {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>